<!-- 修改文件: RealnameManagement.vue -->
<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRealnameStore } from "@/stores/RealnameStore.js";
import RealnameVerifyDialog from "@/views/realname-registration/RealnameVerifyDialog.vue";

const realnameStore = useRealnameStore();

const tableData = ref([]);
const searchForm = ref({
  realName: '',
  idCard: ''
});

const loading = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const verifyDialogVisible = ref(false);
const currentAuth = ref({});

const fetchData = async () => {
  try {
    loading.value = true;
    const res = await realnameStore.getPendingAuthList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...searchForm.value
    });

    // 修改这里，直接从返回的res.data中获取数据
    tableData.value = res.data.records;
    total.value = res.data.totalRow;

  } catch (error) {
    ElMessage.error('获取实名认证列表失败: ' + error.message);
    console.error('API Error:', error);
  } finally {
    loading.value = false;
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  pageNum.value = 1;
  fetchData();
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  fetchData();
};

const resetSearch = () => {
  searchForm.value = { realName: '', idCard: '' };
  pageNum.value = 1;
  fetchData();
};

// 打开审核对话框
const handleVerify = (row) => {
  currentAuth.value = { ...row };
  verifyDialogVisible.value = true;
};

// 审核成功回调
const handleVerifySuccess = () => {
  fetchData();
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div class="realname-management-container">
    <el-card shadow="hover" class="search-card">
      <div class="search-header">
        <h3>实名认证查询</h3>
        <div class="search-actions">
          <el-button type="primary" @click="fetchData" :loading="loading">
            <el-icon class="el-icon--left">
              <Search/>
            </el-icon>
            查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon class="el-icon--left">
              <Refresh/>
            </el-icon>
            重置
          </el-button>
        </div>
      </div>

      <el-form :model="searchForm" label-width="80px" class="search-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="真实姓名">
              <el-input v-model="searchForm.realName" placeholder="请输入真实姓名" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号">
              <el-input v-model="searchForm.idCard" placeholder="请输入身份证号" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="hover" class="table-card">
      <el-table
          :data="tableData"
          style="width: 100%"
          v-loading="loading"
          stripe
          border
          highlight-current-row
      >
        <el-table-column label="ID" prop="id" width="80" align="center"/>
        <el-table-column label="用户ID" prop="userId" width="100" align="center"/>
        <el-table-column label="真实姓名" prop="realName" width="120"/>
        <el-table-column label="身份证号" prop="idCard" width="180"/>
        <el-table-column label="身份证正面" prop="idCardFront" width="180">
          <template #default="{row}">
            <el-image
                v-if="row.idCardFront"
                :src="row.idCardFront"
                :preview-src-list="[row.idCardFront]"
                preview-teleported
                style="width: 100px; height: 60px"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="身份证背面" prop="idCardBack" width="180">
          <template #default="{row}">
            <el-image
                v-if="row.idCardBack"
                :src="row.idCardBack"
                :preview-src-list="[row.idCardBack]"
                preview-teleported
                style="width: 100px; height: 60px"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="createdAt" width="180"/>
        <el-table-column label="状态" prop="authStatus" width="120" align="center">
          <template #default="{row}">
            <el-tag :type="row.authStatus === 1 ? 'warning' : row.authStatus === 2 ? 'success' : 'danger'">
              {{ row.authStatus === 1 ? '待审核' : row.authStatus === 2 ? '已通过' : '已拒绝' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                  type="primary"
                  size="small"
                  @click="handleVerify(scope.row)"
                  :disabled="scope.row.authStatus !== 1"
              >
                审核
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :current-page="pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 审核对话框 -->
    <RealnameVerifyDialog
        v-model:visible="verifyDialogVisible"
        :auth-data="currentAuth"
        @success="handleVerifySuccess"
    />
  </div>
</template>

<style scoped>
.realname-management-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-header h3 {
  margin: 0;
  color: #409EFF;
  font-size: 18px;
}

.search-form {
  margin-top: 10px;
}

.table-card {
  border-radius: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  font-size: 14px;
}

.el-table :deep(.el-table__cell) {
  padding: 12px 0;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}
</style>